<template>
	<el-drawer v-model="isDrawerVisible" title="骑手详情" :with-header="true">
		<el-descriptions
			direction="vertical"
			:column="2"
			border
		>
			<el-descriptions-item label="骑手ID">{{rider.id}}</el-descriptions-item>
			<el-descriptions-item label="骑手姓名">{{rider.name}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{rider.phone}}</el-descriptions-item>
			<el-descriptions-item label="工作状态">{{rider.gzzt}}</el-descriptions-item>
			<el-descriptions-item label="工作收入">{{rider.gzsr}}</el-descriptions-item>
			<el-descriptions-item label="评分">{{rider.mark}}</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const rider = ref({
	id: '',
	name: '',
	phone: '',
	gzzt: '',
	gzsr: 0.0,
	mark: 5.0
});

// 接收父组件传递过来的 骑手 数据
const handleDetailData = (obj) => {
	isDrawerVisible.value = true;
	rider.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
	handleDetailData
})
</script>

<style scoped>
</style>